<template>
  <div class="main-content">
    <!--
          	作者：liushihao@yixuninfo.com
          	时间：2017-01-09
          	描述：客户状态组件
    -->
    <!-- <CustomerStatus v-bind:modalShow="0"></CustomerStatus>-->
    <div class="modal fade bs-example-modal-lg"
         id="batchSaveModal"
         tabindex="-1"
         role="dialog"
         data-backdrop="static"
         aria-labelledby="myModalLabel"
         aria-hidden="true">
      <div class="modal-dialog modal-dialog modal-lg">
        <div class="modal-content"
             style="font-size: 15px;">
          <div class="modal-header">
            <!--<button type="button" :disabled="!percent ==100 || progressShow" class="close" @click="canel"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>-->
            <h4 class="modal-title text-center"
                id="myModalLabel">一客多盘</h4>
          </div>
          <div class="modal-body form-horizontal">
            <div class="row">
              <div class="col-md-3 col-lg-3 r-border"
                   :style="{'height':clientHeight + 'px','overflow-y': 'scroll'}">
                <ul class="layui-timeline">
                  <li class="layui-timeline-item"
                      @click="selectPart(1,'timeline')">
                    <i class="layui-icon layui-timeline-axis"
                       :class="{'o-b-color':currentPage==1}"></i>
                    <div class="layui-timeline-content layui-text timeline-height">
                      <h3 class="layui-timeline-title"
                          :class="{'o-color':currentPage==1}">填写报备信息</h3>
                    </div>
                  </li>
                  <li class="layui-timeline-item"
                      @click="selectPart(2,'timeline')">
                    <i class="layui-icon layui-timeline-axis"
                       :class="{'o-b-color':currentPage==2}"></i>
                    <div class="layui-timeline-content layui-text timeline-height">
                      <h3 class="layui-timeline-title"
                          :class="{'o-color':currentPage==2}">选择到访时间</h3>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="col-md-9">
                <div class="row form-group">
                  <label class="col-md-3 label-header control-label">
                    <span style="color: #cc0837;">*</span>姓名
                  </label>
                  <div class="col-md-9"
                       style="padding-left: 0;width: 300px;">
                    <input type="text"
                           class="form-control"
                           v-model="premises.name" />
                  </div>
                </div>
                <div class="row form-group">
                  <label class="col-md-3 label-header control-label">
                    <span style="color: #cc0837;">*</span>称谓
                  </label>
                  <div class="col-md-9"
                       style="padding-left: 0;width: 300px;">
                    <label class="radio-inline">
                      <input type="radio"
                             name="inlineRadioOptions"
                             id="inlineRadio1"
                             value="option1" /> 先生
                    </label>
                    <label class="radio-inline">
                      <input type="radio"
                             name="inlineRadioOptions"
                             id="inlineRadio2"
                             value="option2" /> 女士
                    </label>
                  </div>
                </div>
                <div class="row form-group">
                  <label class="col-md-3 label-header control-label">
                    <span style="color: #cc0837;">*</span>客户电话
                  </label>
                  <div class="col-md-9"
                       style="padding-left: 0;width: 300px;">
                    <input type="text"
                           class="form-control"
                           v-model="premises.phone" />
                  </div>
                </div>
                <div class="row form-group">
                  <label class="col-md-3 label-header control-label">
                    <span style="color: #cc0837;">*</span>报备楼盘
                  </label>
                  <div class="col-md-9"
                       style="padding-left: 0;width: 300px;">
                    <button type="button"
                            class="btn btn-theme">选择楼盘</button>
                  </div>
                </div>
                <div class="row form-group">
                  <label class="col-md-3 label-header control-label">
                    <span style="color: #cc0837;">*</span>备注
                  </label>
                  <div class="col-md-9"
                       style="padding-left: 0;width: 300px;">
                    <textarea v-model="premises.remark"
                              placeholder="请输入内容"
                              class="form-control"
                              style="height: 135px;"></textarea>
                  </div>
                </div>
              </div>

            </div>
            <div class
                 v-if="progressShow">
              <!--<Progress stroke-width="25" stroke-color="#19be6b" :percent="percent" status="active" />-->
              <div class="progress-back">
                <div class="progress-front"
                     id="progressFront"></div>
              </div>
              <div>
                <div class="total-msg">
                  导入总数：
                  <span id="total"></span>，成功：
                  <span id="success"></span> 条，失败：
                  <span id="fail"></span>条。
                </div>
                <ul class="error-msg"
                    id="errormsg">
                  <!--<li v-for="(m,index) in errorMsgs"><span class="error-num">{{index+1}}</span> &nbsp&nbsp经纪人：{{m.report.agentName}}，手机号：{{m.report.agentPhone}}，客户：{{m.report.name}}，手机号：{{m.report.mobile}}<span style="color:#ff4949">&nbsp{{m.error}}</span></li>-->
                </ul>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <label v-if="reportWay==='1'"
                   style="color: #2d2d2d; font-size: 14px; font-weight: 400; margin-right:5px;">
              <Icon type="ios-alert"
                    color="#E88037" />该楼盘仅支持全号报备
            </label>
            <label v-if="reportWay==='2'"
                   style="color: #2d2d2d; font-size: 14px; font-weight: 400; margin-right:5px;">
              <Icon type="ios-alert"
                    color="#E88037" />该楼盘仅支持隐号报备
            </label>
            <button type="button"
                    class="btn btn-theme"
                    @click="batchSave"
                    v-if="!progressShow">报备</button>
            <button type="button"
                    class="btn btn-default"
                    @click="canel"
                    v-if="!progressShow">取消</button>
            <button type="button"
                    id="returnBtn"
                    class="btn btn-theme"
                    :disabled="percent!=100"
                    @click="goBack"
                    v-if="progressShow">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CustomerStatus from "../common/customerStatusComponents.vue";
import calendar from "../common/calendar.vue";
import RecommendSelect from "../declare/components/RecommendSelect.vue";
import { formatDate } from "../../assets/js/date.js";
export default {
  components: {
    RecommendSelect
  },
  data() {
    return {
      modalShow: "",
      myform: {},
      premises: {
        name: "",
        remark: "",
        phone: ""
      },
      clientHeight: 0,
      params: {
        staffId: window.localStorage.getItem("4_userId"),
        premisesId: this.$route.params.premisesId,
        reportType: "1",
        visitProtectDate: "",
        reportModelList: [],
        recommenderUuid: null
      },
      cList: [
        {
          name: "",
          mobile: "",
          gender: "",
          email: "",
          special: "",
          coords: "",
          visitProtectDate: ""
        }
      ],
      btnShow: true,
      isShow: false,
      isChecked: false,
      helfTel: "",
      visitProtectCalendar: "",
      dateTime: "",
      reportModelList: [],
      customerMode: false,
      reportProtectTipImgFlag: false,
      reportProtectTipFlag: false,
      reportProtectObj: null,
      currentTip: 0,
      reportProtectMsg: "",
      fillInfoStatus1: false,
      fillInfoStatus2: false,
      currentPage: 1,
      partOne: true,
      partTwo: false
    };
  },
  computed: {
    userTel() {
      let numA, numB, numC, numD, numE, numF, numG;
      if (this.helfTel.length > 0) {
        numA = this.helfTel.substring(0, 1);
        numB = this.helfTel.substring(1, 2);
        numC = this.helfTel.substring(2, 3);
        numD = this.helfTel.substring(3, 4);
        numE = this.helfTel.substring(4, 5);
        numF = this.helfTel.substring(5, 6);
        numG = this.helfTel.substring(6, 7);
      }
      return {
        numA,
        numB,
        numC,
        numD,
        numE,
        numF,
        numG
      };
    }
  },
  mounted: function () {
    //初始化
    this.findPremisesInfo();
    this.getModelList();
    //初始化窗口大小
    this.clientHeight = document.body.clientHeight - 180;
  },
  components: {
    RecommendSelect,
    CustomerStatus,
    calendar
  },
  methods: {
    checkPhone() {
      let _self = this;
      //if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.cList[0].mobile)) {
      if (!/^\d{11}$/.test(_self.cList[0].mobile)) {
        layer.msg("请输入正确的号码", {
          time: 2000
        });
        return false;
      }
      _self.checkReportProtectConfig();
    },
    reportProtectTip(type) {
      if (type == 1) {
        if (this.reportProtectObj && this.reportProtectObj.code == "6") {
          layer.msg("该客户在此楼盘下已存在有效报备无法再次进行报备");
          return;
        }
        this.reportProtectTipFlag = true;
      } else {
        this.reportProtectTipFlag = false;
      }
    },
    checkReportProtectConfig() {
      // 本次这个不发
      // return;

      var _self = this;
      var body = {};
      body.params = {
        premisesId: this.$route.params.premisesId,
        cusPhoneList: [_self.cList[0].mobile]
      };
      var url = _self.utilHelper.apiUrl + "/api/checkReportProtect";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        var resData = body.resData;
        if (body.result == 1) {
          if (resData.list && resData.list.length > 0) {
            this.reportProtectObj = resData.list[0];
            this.currentTip = this.reportProtectObj.code;
            this.reportProtectTipImgFlag = true;
            _self.reportProtectMsg = resData.list[0].msg;
          } else {
            this.reportProtectTipImgFlag = false;
          }
        } else {
          this.reportProtectTipImgFlag = false;
          layer.msg("报备保护时间校验失败");
        }
      });
    },
    //楼盘信息
    findPremisesInfo: function () {
      var _self = this;
      var params = {
        id: _self.$route.params.premisesId
      };
      var body = {};
      body.params = params;
      var url = this.utilHelper.apiUrl + "/api/getPremisesDetail";
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          _self.premises = resData.detailResDto;
          if (!_self.premises.reportWay) {
            _self.premises.reportWay = "0";
          } else if (_self.premises.reportWay === "1") {
            this.isShow = false;
          } else if (_self.premises.reportWay === "2") {
            this.isShow = true;
          }
          if (_self.premises.reportProtectType == "1") {
            _self.reportProtectMsg = _self.premises.reportProtect / 1440 + "天";
          } else if (_self.premises.reportProtectType == "2") {
            _self.reportProtectMsg = _self.premises.reportProtect / 60 + "小时";
          } else if (_self.premises.reportProtectType == "3") {
            _self.reportProtectMsg = _self.premises.reportProtect + "分钟";
          }
        }
      });
    },
    isInSpecialTime: function () {
      var _self = this;
      var url = _self.utilHelper.apiUrl + "/api/isInSpecialTime";
      var body = {};
      body.params = {
        hopeTime: _self.cList[0].visitProtectDate,
        premisesId: _self.params.premisesId
      };
      _self.$http.post(url, body).then((response) => {
        var data = response.body.resData;
        var time = data.specialTime;
        var msg = data.msg;
        var saveDays = data.saveDays;
        if (data.result == 1) {
          if (msg == "1") {
            //特殊报备
            layer.msg("特殊报备请到移动端");
            _self.btnShow = true;
          } else if (msg == "2") {
            _self.saveCustomerPremises();
          } else if (msg == "3") {
            _self.btnShow = true;
            layer.alert("您选择的时间必须大于系统当前时间");
          } else if (msg == "4") {
            layer.confirm(
              "本楼盘的到访延长时间为" +
                saveDays +
                "分钟，从报备之时起" +
                saveDays +
                "分钟内未到访，需要重新报备，您的期望带看时间已超过了到访延长时间",
              {
                btn: ["修改带看时间", "没关系，届时再报备"], //按钮
                shade: false //不显示遮罩
              },
              function () {
                layer.closeAll();
                _self.btnShow = true;
              },
              function () {
                _self.saveCustomerPremises();
                layer.closeAll();
              }
            );
          }
        } else {
          layer.msg(data.resultMsg);
          _self.btnShow = true;
        }
      });
    },
    checkCustomerPremises: function () {
      var _self = this;
      if (_self.cusPreValidate()) {
        _self.isInSpecialTime();
      }
    },
    saveCustomerPremises: function () {
      var _self = this;
      var url = _self.utilHelper.apiUrl + "/api/addReport";
      _self.btnShow = false;
      _self.params.customerList = JSON.parse(JSON.stringify(_self.cList));
      var modelList = [];
      //报备模板列表
      for (var r in _self.reportModelList) {
        if (!_self.reportModelList[r].content) {
          layer.msg("请填写" + _self.reportModelList[r].modelColumn);
          _self.btnShow = true;
          return;
        }
        modelList.push({
          modelId: _self.reportModelList[r].id,
          modelColumn: _self.reportModelList[r].modelColumn,
          content: _self.reportModelList[r].content
        });
      }
      _self.params.reportModelList = modelList;

      var body = {};
      body.params = _self.params;
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          var returnMsg = JSON.parse(resData.resultMsg);
          var successCount = returnMsg.successCount;
          var failCount = returnMsg.failCount;
          var failMsg = returnMsg.failMsg;
          if (failCount == 0 && successCount > 0) {
            layer.msg(
              "提交成功",
              {
                time: 2000
              },
              function () {
                _self.$router.replace({
                  path: "/premises"
                });
              }
            );
          } else {
            layer.msg(failMsg);
            _self.btnShow = true;
          }
          // 2代表后台的重复点击
        } else if (resData.result != "2") {
          layer.msg("报备失败");
          _self.btnShow = true;
        }
      });
    },
    cusPreValidate() {
      var _self = this;
      var gender = _self.cList[0].gender;
      var name = _self.cList[0].name;
      var mobile = _self.cList[0].mobile;
      var remark = _self.params.remark;
      var dateTime = $("#dateTime").text(); //获取期望带看时间
      if (dateTime == "") {
        layer.msg("请选择期望带看时间", {
          time: 2000
        });
        _self.btnShow = true;
        return false;
      }
      _self.cList[0].visitProtectDate = dateTime + ":00";
      _self.params.visitProtectDate = dateTime + ":00";
      if (!gender) {
        layer.msg("请选择性别", {
          time: 2000
        });
        _self.btnShow = true;
        return false;
      }
      if (!name) {
        layer.msg("请填写姓名", {
          time: 2000
        });
        _self.btnShow = true;
        return false;
      }
      //判断是否隐号
      if (_self.isShow == true) {
        let numA = _self.helfTel.substring(0, 3);
        let numB = _self.helfTel.substring(3);
        //if (!/^1(3|4|5|6|7|8|9)\d{1}$/.test(numA) || !/^\d{4}$/.test(numB)) {
        if (!/^\d{3}$/.test(numA) || !/^\d{4}$/.test(numB)) {
          layer.msg("请输入正确的号码", {
            time: 2000
          });
          return false;
        }
        _self.cList[0].mobile = numA + "****" + numB;
      } else {
        //if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.cList[0].mobile)) {
        if (!/^\d{11}$/.test(_self.cList[0].mobile)) {
          layer.msg("请输入正确的号码", {
            time: 2000
          });
          return false;
        }
      }
      if (!remark) {
        layer.msg("请填写备注", {
          time: 2000
        });
        _self.btnShow = true;
        return false;
      }
      return true;
    },
    obtainState() {
      this.isChecked = true;
    },
    noState() {
      this.isChecked = false;
    },
    getModelList() {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getReportModelList";
      var body = {};
      body.params = {
        premisesId: _self.$route.params.premisesId,
        modelType: 2
      };
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == "1") {
          _self.reportModelList = body.resData.list;
          if (_self.reportModelList && _self.reportModelList.length > 0) {
            _self.customerMode = true;
          }
        } else {
          layer.msg("获取报备模板失败");
        }
      });
    },
    setProtectTime(time, type) {
      if (type == "1") {
        return time / 1440 + "天";
      } else if (type == "2") {
        return time / 60 + "小时";
      } else if (type == "3") {
        return time + "分钟";
      }
      return "";
    },
    partOneCheck() {
      if (!this.premises.name) {
        layer.msg("请输入姓名!");
        return false;
      }
      if (!this.premises.phone) {
        layer.msg("请输入电话!");
        return false;
      }
      return true;
    },
    partTwoCheck() {
      var editHouseTypeList = this.editHouseTypeList;
      if (editHouseTypeList.length <= 0) {
        layer.msg("请填写户型信息!");
        return false;
      }
      for (let index = 0; index < this.editHouseTypeList.length; index++) {
        const item = this.editHouseTypeList[index];
        if (item.toDelete == 1) {
          continue;
        }
        if (!item.room || !item.hall || !item.bathroom || !item.balcony) {
          layer.msg("请选择户型格局!");
          return;
        }
        if (!item.orientations) {
          layer.msg("请选择朝向!");
          return;
        }
        if (!item.beginArea) {
          layer.msg("请填写建筑面积!");
          return;
        }
        if (item.beginArea && item.endArea) {
          if (parseFloat(item.beginArea) > parseFloat(item.endArea)) {
            layer.msg("建筑面积区间填写错误!");
            return;
          }
        }
        if (!(item.averageBeginPrice || item.averageEndPrice)) {
          layer.msg("请填写平均单价!");
          return;
        }
        if (item.averageBeginPrice && item.averageEndPrice) {
          if (
            parseFloat(item.averageBeginPrice) >
            parseFloat(item.averageEndPrice)
          ) {
            layer.msg("平均单价区间填写错误!");
            return;
          }
        }
        if (!item.url) {
          layer.msg("请上传户型图!");
          return;
        }
      }
      return true;
    },
    setPartOneParams() {
      let estateType = $("#estateTypes").multipleSelect("getSelects");
      let buildingType = $("#buildingTypes").multipleSelect("getSelects");
      let baseCodeValue = $("#baseCodeValues").multipleSelect("getSelects");
      let averagePrice = "";
      if (this.beginPrice) {
        averagePrice += this.beginPrice + ",";
      }
      if (this.endPrice) {
        if (averagePrice.charAt(averagePrice.length - 1) == ",") {
          averagePrice += this.endPrice;
        } else {
          averagePrice += "," + this.endPrice;
        }
      }
      this.body.params.url = this.premises.url; //封面图
      this.body.params.name = this.premises.name;
      this.body.params.projectCodeM2 = this.premises.projectCodeM2;
      this.body.params.saleStatus = this.premises.saleStatus;
      this.body.params.provinceId = this.premises.provinceId;
      this.body.params.cityId = this.premises.cityId;
      this.body.params.areaId = this.premises.areaId;
      this.body.params.premisesAddress = this.premises.premisesAddress;
      this.body.params.codeName = baseCodeValue.join(",");
      this.body.params.averagePrice = averagePrice;
      this.body.params.buildingType = buildingType.join(",");
      this.body.params.decorationType = this.premises.decorationType;
      this.body.params.estateType = estateType.join(",");
      this.body.params.propertyCharges = this.premises.propertyCharges;
      //设置开盘日期
      this.body.params.openingDate = this.utils.dateFormat(
        this.premises.openingTime,
        "yyyy-MM-dd"
      );
      //设置入住日期
      this.body.params.checkInDate = this.utils.dateFormat(
        this.premises.checkInTime,
        "yyyy-MM-dd"
      );
      this.body.params.plotRatio = this.premises.plotRatio;
      this.body.params.greeningRate = this.premises.greeningRate;
      this.body.params.propertyCompany = this.premises.propertyCompany;
      this.body.params.propertyAddr = this.premises.propertyAddr;
      this.body.params.rightYears = this.premises.rightYears;
      //规划户数
      this.body.params.houseHolds = this.premises.houseHolds;
      //地上车位数
      this.body.params.upCarPort = this.premises.upCarPort;
      //地下车位数
      this.body.params.downCarPort = this.premises.downCarPort;
      this.body.params.buildingCompany = this.premises.buildingCompany; //开发商
      this.body.params.saleAddr = this.premises.saleAddr; //售楼部地址
      this.body.params.panoramicView = this.premises.panoramicView;
    },
    setPartTwoParams() {
      let houseTypeList = [];
      this.editHouseTypeList.forEach((item) => {
        var area = item.beginArea;
        if (item.endArea) {
          area += "," + item.endArea;
        }
        houseTypeList.push({
          area: area,
          apartmentLayout: item.room + item.hall + item.bathroom + item.balcony,
          url: item.url.join(";"),
          orientations: item.orientations,
          averagePrice: item.averageBeginPrice + "," + item.averageEndPrice,
          huxingName: item.huxingName,
          houseStruct: item.houseStruct,
          decoration: item.decoration,
          toDelete: 0
        });
      });
      this.body.params.hxtInfo = JSON.stringify(houseTypeList);
    },
    showPart(part) {
      this.currentPage = part;
      this.partOne = part == 1 ? true : false;
      this.partTwo = part == 2 ? true : false;
    },
    selectPart(part, from) {
      if (from && from == "timeline") {
        if (this.currentPage == 1 && part > 1) {
          if (!this.partOneCheck()) {
            this.fillInfoStatus1 = false;
            //layer.msg('楼盘基本信息还有必填字段未填或格式不对！');
            return;
          } else {
            this.setPartOneParams();
            this.fillInfoStatus1 = true;
          }
        }
        if (this.currentPage == 2 && part > 2) {
          if (!this.partTwoCheck()) {
            this.fillInfoStatus2 = false;
            //layer.msg('户型信息还有必填字段未填或格式不对！');
            return;
          } else {
            this.setPartTwoParams();
            this.fillInfoStatus2 = true;
          }
        }
        if (this.currentPage != part && this.premises.id) {
          layer.confirm(
            "您即将离开该页面，确定数据已保存？",
            { title: "友情提示" },
            (index) => {
              if (
                this.body.params.id &&
                (part == 1 || part == 2) &&
                this.currentPage != part
              ) {
                this.partActive = true;
              }
              this.showPart(part);
              layer.close(index);
            }
          );
        } else {
          this.showPart(part);
        }
      } else {
        if (this.currentPage == 1 && this.partOneCheck()) {
          this.fillInfoStatus1 = true;
          this.setPartOneParams();
        } else if (this.currentPage == 2 && this.partTwoCheck()) {
          this.fillInfoStatus2 = true;
          this.setPartTwoParams();
        } else {
          return;
        }
        this.showPart(part);
      }
    }
  }
};
</script>
<style scoped>
.redColor {
  color: #ff5e5e;
}
.reportBtn {
  display: block;
  color: #eb6100;
  font-size: 16px;
  margin-top: 6px;
}
.reportBtn .fa {
  font-size: 20px;
  margin-right: 6px;
}
.hideReport {
  display: block;
  height: 28px;
  width: 198px;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;
  padding: 0 12px;
}
.hideReport.active {
  border: 1px solid #eb6100;
}
.digital-input {
  overflow: hidden;
  width: 100%;
  z-index: 10;
  position: relative;
}
.digital-input .digital-input-item {
  height: 26px;
  float: left;
  width: 9.09%;
  border-right: 1px dashed #d8d8d8;
  text-align: center;
  line-height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.digital-input-item .fa {
  font-size: 12px;
  color: #999;
}
.hideReport.active .digital-input-item {
  border-right: 1px dashed #eb6100;
}
.thisNumber {
  position: absolute;
  width: 198px;
  height: 26px;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0;
}
.show-time {
  color: #eb6100;
}
.reportProtectTip {
  position: absolute;
  z-index: 999;
  top: 30px;
  left: 10px;
  width: 250px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background: #fff;
  font-size: 14px;
}
.reportProtectTip .tipBtn {
  width: 230px;
  height: 33px;
  line-height: 33px;
  background: #ff5e5e;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  margin-top: 20px;
  position: absolute;
  bottom: 10px;
}
.warning-icon {
  font-size: 20px;
  color: #ff5e5e;
}
</style>
<style scoped>
/* @import url("../../assets/css/multiple-select.css"); */
.o-color {
  color: #e98d4a !important;
}
.o-b-color {
  background-color: #e98d4a !important;
  border-color: #e98d4a !important;
  color: #fff !important;
}
.o-border-color {
  border-color: #e98d4a !important;
}
.g-color {
  background: #1abc9c !important;
  color: #fff !important;
}
.r-border {
  border-right: 1px solid #ddd;
}
.modal-content {
  margin-top: 10px !important;
}
.layui-timeline {
  padding-top: 20px;
}
.self-modal-dialog {
  width: 90%;
  margin: 0 auto;
}
.fillInfoStatus {
  position: absolute;
  left: -70px;
  top: 0;
  z-index: 10;
  width: 50px;
  height: 20px;
  line-height: 20px;
  background-color: #e4e4e4;
  color: #999999;
  text-align: center;
  border-radius: 3px;
}
.layui-text h3 {
  font-size: 15px;
  font-weight: 600;
}
.layui-timeline-axis {
  position: absolute;
  left: -3px;
  top: 0;
  z-index: 10;
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #e2e2e2;
}
.face-img {
  text-align: center;
  font-size: 15px;
  color: #000;
}
.add-huxing {
  width: 130px !important;
  height: 120px;
  position: relative;
  padding: 15px !important;
  border: 1px dashed #e2e2e2;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
  color: #999;
  display: inline-block;
  margin: 20px 0 50px 0;
}
.add-huxing .layui-icon {
  font-size: 50px;
  color: #f87142;
}
.housing-list li {
  border-bottom-style: none;
  padding: 15px 0 !important;
}
.list-info-template .control-label {
  font-weight: normal !important;
  font-size: 15px;
  min-width: 95px;
}
.list-info-template .form-control {
  height: 36px !important;
}
.list-info-template .control-details label {
  margin-right: 0 !important;
}
.base-title {
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  text-align: left;
  color: #000;
  margin-top: 20px;
  height: 33px;
  line-height: 33px;
}
.base-title .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f87142;
  margin: 0 30px;
}
.base-title .tips {
  font-size: 13px;
  color: #999999;
  font-weight: normal;
  padding-left: 10px;
}
.base-title .questionImg {
  width: 18px;
  height: 18px;
}
.base-title .linkM2Btn {
  display: inline-block;
  width: 110px;
  height: 30px;
  line-height: 30px;
  background: #3365ff;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  border-radius: 3px;
}
.base-title .m2TipContent {
  position: absolute;
  z-index: 99999;
  display: inline-block;
  width: 260px;
  height: 100px;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
  background: #f2f2f2;
  color: #3365ff;
  padding: 10px;
  right: 0.5vw;
  top: 26px;
  border-radius: 3px;
}
.user-define li {
  padding: 0px !important;
  margin: 0px !important;
}
.ms-choice {
  height: 33px !important;
  line-height: 33px !important;
}
.addHouseTypeItemBtn {
  width: 120px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #f87142;
  color: #f87242;
  border-radius: 3px;
  text-align: center;
}
.delHouseTypeItemBtn {
  display: inline-block;
  width: 100px;
  height: 33px;
  line-height: 33px;
  border: 1px solid #ff6a6a;
  color: #ff6a6a;
  border-radius: 3px;
  text-align: center;
  font-size: 15px;
  font-weight: normal;
  float: right;
  margin-right: 7.5vw;
}
.ivu-checkbox-group label {
  font-weight: normal !important;
}
.partThree .commonLi {
  padding-bottom: 60px;
  margin-bottom: 60px;
  margin-top: 20px;
}
.partThree .otherLi,
.partFive .otherLi {
  display: inline-block;
  padding-top: 30px;
}
.ivu-table-large td {
  height: 40px !important;
}
.ivu-table-large th {
  height: 40px !important;
}
.commissionTable td,
.commissionTable th,
.rewardTable td,
.rewardTable th {
  border: 1px solid #ddd;
  color: #666;
  height: 40px;
  text-align: center;
}
.commissionTable thead th,
.rewardTable thead th {
  background-color: #f8f8f9;
}
.commissionTable thead th:nth-child(1) {
  width: 120px;
}
.commissionTable thead th:nth-child(2) {
  width: 160px;
}
.rewardTable thead th:nth-child(1) {
  width: 80px;
}
.rewardTable thead th:nth-child(2) {
  width: 120px;
}
.rewardTable thead th:nth-child(3) {
  width: 160px;
}
.rewardTable input {
  height: 100%;
  width: 100%;
  border-style: none;
  font-size: 15px;
  padding: 0 8px;
}
.saveAndNext {
  border: 1px solid #e98d4a;
  background: #fff;
  margin-right: 20px;
}
.ivu-modal-footer {
  border-top-style: none !important;
  padding: 0 !important;
}
.timelineModal .dot {
  border: 2px solid #cfcfcf;
  width: 15px;
  height: 15px;
  border-radius: 50px;
  background: white;
  margin: auto;
  margin-bottom: -7px;
  position: relative;
}
.timelineModal .dot span {
  position: absolute;
  width: 100px;
  left: -17px;
  top: 20px;
  display: inline-flex;
  font-size: 15px;
  font-weight: bold;
}
.timelineModal .item {
  flex: 1;
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-top: -10px;
}
.timelineModal .horizontalLine {
  flex: 1;
  display: flex;
  border-bottom: 1px solid #ddd;
}
.timelineModal .horizontalLine-half {
  flex: 0.5;
  display: flex;
  border-bottom: 1px solid #ddd;
}
.timelineModal .verticalLine1 {
  width: 1px;
  height: 100px;
  border: 1px solid #ddd;
  position: absolute;
  top: 10px;
  left: 220px;
}
.timelineModal .verticalLine2 {
  width: 1px;
  height: 100px;
  border: 1px solid #ddd;
  position: absolute;
  top: 10px;
  right: 245px;
}
.timelineModal .verticalLine3 {
  width: 1px;
  height: 100px;
  border: 1px solid #ddd;
  position: absolute;
  top: 10px;
  right: 70px;
}
.timelineModal .itemText1 {
  position: absolute;
  width: 130px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 20px;
  line-height: 36px;
  text-align: center;
  font-size: 13px;
  color: #999;
  top: 110px;
  left: 160px;
}
.timelineModal .itemText2 {
  position: absolute;
  width: 130px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 20px;
  line-height: 36px;
  text-align: center;
  font-size: 13px;
  color: #999;
  top: 110px;
  right: 175px;
}
.timelineModal .itemText3 {
  position: absolute;
  width: 130px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 20px;
  line-height: 36px;
  text-align: center;
  font-size: 13px;
  color: #999;
  top: 110px;
  right: 5px;
}
.timelineModal .tips1 {
  position: absolute;
  top: 270px;
  left: 220px;
  color: #999;
}
.timelineModal .tips2 {
  position: absolute;
  top: 270px;
  right: 70px;
  text-align: left;
  color: #999;
}
.timelineModal .tips3 {
  position: absolute;
  top: 270px;
  right: 50px;
  text-align: right;
  color: #999;
}
.ivu-input-number,
.ivu-input-number-small .ivu-input-number-input-wrap,
.ivu-input-number-small input {
  height: 33px !important;
  line-height: 33px;
  width: 7vw !important;
}
.ivu-input-number-small .ivu-input-number-handler {
  height: 16px !important;
}
.file-image {
  margin-right: 30px;
  width: 150px;
  height: 115px;
  float: left;
  position: relative;
  margin-bottom: 10px;
}
#myTabContent {
  padding: 20px 0;
}
.fa-times-circle {
  position: absolute;
  right: 3px;
  top: 2px;
}
.selectUserName {
  width: 19vw;
  height: 36px;
  line-height: 36px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 8px;
  color: #ccc;
  font-size: 14px;
}
.roomSelect {
  width: 12vw !important;
  padding: 6px 4px !important;
  display: inline;
  margin-left: 5px;
}

#discount,
#feature,
#cooperationRule,
#selling,
#customer,
#saleSkill,
#introduction {
  height: 200px;
}
.control-button-wrap {
  display: inline-block;
  height: 38px;
  border-radius: 3px;
  margin-left: 22px;
}
.white_content_header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: rgba(248, 248, 248, 1);
  border-bottom: 1px solid #d3d3d3;
  text-align: center;
}
.control-button-wrap-content {
  min-width: 120px;
  min-height: 38px;
  line-height: 38px;
  border-radius: 3px;
  text-align: center;
  color: #999;
  border: 1px solid #d3d3d3;
  margin-top: 10px;
  position: relative;
  top: -10px;
}
.control-button-wrap-content .delete-commission {
  width: 10px;
  height: 10px;
  line-height: 10px;
  font-size: 10px;
  border-radius: 50%;
  border: 1px solid #f87242;
  color: #f87242;
  cursor: pointer;
  float: right;
}
.control-button-add {
  display: inline-block;
  width: 70px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border: 1px dashed #ccc;
  border-radius: 5px;
  color: #999;
  cursor: pointer;
  position: relative;
  top: -7px;
  margin-left: 5px;
}
.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.white_content {
  display: none;
  position: absolute;
  top: 20%;
  left: 36%;
  width: 380px !important;
  height: 230px !important;
  border: 1px solid #d3d3d3;
  background-color: white;
  z-index: 1002;
  border-radius: 5px;
}
.white_content_title {
  color: #f87242;
  font-weight: 700;
  font-size: 14px;
}
.white_content_close {
  float: right;
  margin: 10px 10px 0 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #999;
  font-size: 29px;
  border: 1px solid #d3d3d3;
  cursor: pointer;
}
.first_white_input {
  width: 80%;
  margin: 10px auto 20px;
}
.first_white_input .set_format,
.set_money {
  color: #333;
  font-size: 14px;
}
.first_white_input input {
  height: 32px;
  border-radius: 3px;
  outline: 0;
  border: 1px solid #999;
}
.first_white_input input:focus {
  border: 1px solid #f87242;
}
.select_type {
  width: 50px;
  height: 32px;
  float: right;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  cursor: pointer;
}
.select_type #type_money {
  width: 25px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-align: center;
}
.select_type #type_percent {
  width: 25px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.set_money_input::-webkit-outer-spin-button,
.set_money_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.set_money_input[type="number"] {
  -moz-appearance: textfield;
}
.check_type {
  background: #f87242;
}
.check_type1 {
  background: #d3d3d3;
}
.first_white_button1 {
  background: #f87242;
  color: #fff;
  width: 140px !important;
  height: 36px !important;
  line-height: 36px !important;
  text-align: center;
  font-size: 16px;
  border-radius: 3px;
  cursor: pointer;
  border-style: none;
}
.file-upload {
  width: 150px;
  height: 115px;
  position: relative;
  padding: 30px;
  border: 1px dashed #e2e2e2;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
  color: #999;
  display: inline-block;
}
.file-upload:hover {
  border: 1px dashed #f87142;
}
.file-upload .layui-icon {
  font-size: 50px;
  color: #f87142;
}
#myTab li {
  padding: 0 !important;
}
</style>
